<template>
  <div style="margin:0 auto;margin-top: 20px;width: 600px">
    <el-form label-position="right" label-width="80px" :model="addForm" :rules="rules" ref="addForm">
      <el-form-item label="酒席名称" prop="name">
        <el-input  v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item label="事由" prop="reason">
        <el-input  v-model="addForm.reason"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input  v-model="addForm.remark"></el-input>
      </el-form-item>
      <el-form-item class="add-area">
        <el-button type="primary" size="small" @click="submitForm('addForm')">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ResultUtil from "@/utils/ResultUtil";

export default {
  name:'BanquetAdd',
  data(){
    return {
      addForm: {
        name:'',
        reason:'',
        remark:'',
      },
      rules: {
        name: [
          {required: true, message: '请输入酒席名称', trigger: 'blur'},
          {min: 5, max: 32, message: '长度在 5 到 32 个字符', trigger: 'blur'}
        ],
        reason: [
          {required: true, message: '请输入酒席事由', trigger: 'blur'},
          {min: 5, max: 32, message: '长度在 5 到 32 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    submitForm(formName) {
      this.$refs[formName].validate( async (valid) => {
        if (valid) {
          let result = await this.$API.reqBanquetAdd(this.addForm);
          if(ResultUtil.isSuccess(result)){
            this.$router.go(-1);
          }
        } else {
          return false;
        }
      });
    },
  },
}
</script>


<style scoped>
.add-area{
  display: flex;
  justify-content: center;
}
</style>
